<template>
    <div>
        <Echart :options="state.option" :height="300" />
    </div>
</template>
<script lang="ts" setup>
import { Echart } from '@/components/Echart'
import { ref, reactive, unref, onMounted, watch } from "vue"
const state = reactive({
    option: {
        title: {
            text: '简历通过概率统计图'
        },
        tooltip: {
            trigger: 'item',
        },
        xAxis: {
            type: 'category',
            data: ['初筛通过率', "应聘部门通过率", '笔试通过率', '面试通过率', '体检审查率', '入职率'],
            axisLabel: {
                interval: 0
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} %'
            }
        },
        series: [
            {
                data: [0, 0, 0, 0, 0, 0],
                type: 'bar'
            }
        ]
    } as any
})
const props = defineProps({
    data: {
        type: Array,
        default: () => {
            return []
        }
    }
})
watch(() => props.data, (newValue: any) => {
    let obj = newValue[0]
    let data = [
        obj.initialScreeningPassRate,
        obj.departmentScreeningPassRate,
        obj.writtenExaminationPassRate,
        obj.interviewPassRate,
        obj.physicalExaminationPassRate,
        obj.entryRate
    ]
    state.option.series[0].data = data
}, { deep: true })
onMounted(() => {

})

</script>

<style lang="less" scoped></style>